<template>
    <div class="message">
        <mt-header :fixed="false" mtClass="no-bg" />
        <div class="tabbar">
            <mt-navbar v-model="selected">
                <mt-tab-item id="1">通知</mt-tab-item>
                <mt-tab-item id="2">公告</mt-tab-item>
            </mt-navbar>
        </div>
        <div class="tab-container">
            <mt-tab-container v-model="selected" v-show="isShow" v-cloak>
                <mt-tab-container-item id="1">
                    <div class="content" v-if="tab1.totalElements>0">
                        <div class="inner-list tongzhi" v-for="(item,index) in tab1.list" :key="index" @click="toDetail(item)">
                            <div class="title" :class="{'isread':item.state=='0'}">{{item.title}}</div>
                            <div class="time">{{item.createDate | filterTime}}</div>
                        </div>
                        <div class="more" @click="loadmore('1')" v-show="!tab1.lastPage">查看更多</div>
                    </div>
                    <PictureTips srcType="nomsg" text="暂无消息" v-else></PictureTips>
                </mt-tab-container-item>
                <mt-tab-container-item id="2">
                    <div class="content" v-if="tab2.totalElements>0">
                        <div class="inner-list gonggao" v-for="(item,index) in tab2.list" :key="index" @click="toDetail(item)">
                            <div class="title" :class="{'isread':item.state=='0'}">{{item.title}}</div>
                            <div class="time">{{item.createDate | filterTime}}</div>
                        </div>
                        <div class="more" @click="loadmore('2')" v-show="!tab2.lastPage">查看更多</div>
                    </div>
                    <PictureTips srcType="nomsg" text="暂无消息" v-else></PictureTips>
                </mt-tab-container-item>
            </mt-tab-container>
        </div>
    </div>
</template>

<script>
import mtHeader from "@/components/Header"
import PictureTips from "@/components/PictureTips/index.vue"
import { GetUserMessageList } from '@/api/api'
import { parseTime } from '@/utils/index'
export default {
    data(){
        return {
            selected:'1',
            isShow:false,
            flag:false,
            tab1:{
                list: [],
                currentPage:1,
                lastPage:false,
                totalElements:0,
            },
            tab2:{
                list: [],
                currentPage:1,
                lastPage:false,
                totalElements:0,
            }
        }
    },
    components:{
        mtHeader,
        PictureTips
    },
    mounted(){
        this.fetchData('1');
        this.fetchData('2');
    },
    filters:{
        filterTime:function(val){
            return parseTime(val)
        }
    },
    methods:{
        fetchData(type){
            GetUserMessageList({
                type: type,
                page: type == '1'?this.tab1.currentPage:this.tab2.currentPage,
                size: 10,
            }).then(res => {
                if( res.code == 200 ){
                    if(type == '1'){
                        this.tab1.list = this.tab1.list.concat(res.data.dataList);
                        this.tab1.currentPage = res.data.currentPages;
                        this.tab1.lastPage = res.data.lastPage;
                        this.tab1.totalElements = res.data.totalElements;
                    }else{
                        this.tab2.list = this.tab2.list.concat(res.data.dataList);
                        this.tab2.currentPage = res.data.currentPages;
                        this.tab2.lastPage = res.data.lastPage;
                        this.tab2.totalElements = res.data.totalElements;
                    }

                    this.$nextTick(() => {
                        this.isShow = true;
                    })
                }
            })
        },
        loadmore(type){
            if(type == '1'){
                this.tab1.currentPage++;
            }else{
                this.tab2.currentPage++;
            }
            this.fetchData(type);
        },
        toDetail(item){
            this.$router.push({
                path: '/account/message/detail',
                query: {
                    type: this.selected,
                    id: item.id,
                    title: item.title,
                    content: item.content,
                    createDate: item.createDate,
                    state: item.state
                }
            })
        }
    }
}
</script>

<style lang="stylus" scoped>
.message{
    height:100%;
    overflow:scroll;
    .tabbar{
        width:180px;
        position: absolute;
        top:0px;
        left:50%;
        right:0;
        background: #fff;
        z-index: 1;
        margin-left:-90px;
    }
    .tab-container{
        .content{
            padding:0 15px;
            .inner-list{
                padding: 15px 0;
                border-bottom:1px solid #efefef;
                position:relative;
                .title{
                    font-size:16px;
                    color:#666;
                    line-height:17px;
                    margin-bottom:8px;
                    &.isread{
                        color:#b3b3b3;
                    }
                }
                .time{
                    font-size:14px;
                    color:#ccc;
                }
                .desc{
                    width:100%;
                    font-size:12px;
                    overflow:hidden;
                    color:#B3B3B3;
                    white-space: nowrap;
                    text-overflow:ellipsis;
                }
                // &.tongzhi{
                //     height:75px;
                //     padding: 15px 0;
                //     .title{
                //         font-size:14px;
                //         margin-right:150px;
                //         overflow:hidden;
                //         white-space: nowrap;
                //         text-overflow:ellipsis;
                //     }
                //     .time{
                //         position:absolute;
                //         top:15px;
                //         right:15px;
                //         width:120px;
                //     }
                // }
            }
            .more{
                text-align:center;
                margin-top:15px;
                margin-bottom:15px;
                color:#bfbfbf;
                font-size:12px;
            }
        }
    }
}
</style>
